<template>
    <my-page>
        <div class="noticeList-root">
            <div class="noticeList-filter"></div>
            <div class="noticeList-border">
                <myItem :curData="item" :curIndex="index" v-for="(item, index) in data" :key="index"></myItem>
            </div>
        </div>
    </my-page>
</template>

<script setup>
import { onMounted } from 'vue'
import myItem from './item/index.vue'
import { useUserStores } from "@/stores/index.js";
import { getNoticeList_API } from '@/axios/api/other.js'


const userStores = useUserStores();
let config = userStores.getConfigAction();
const backImage = 'url("' + config.backImage + '")';

const data = ref([]);

onMounted(() => {
    loading.show();
    getNoticeList_API().then(res => {
        if (res.data.statusCode == 0) {
            data.value = res.data.result;

            for (let i = 0; i < data.value.length; i++) {
                console.log(data.value[i])
                data.value[i].createTime = data.value[i].createTime.split('T')[0];
                data.value[i].isDate = true;
                data.value[i].isBottom = false;

                if (i != 0 && data.value[i - 1].createTime == data.value[i].createTime) {
                    data.value[i].isDate = false;
                }
                if (i != 0 && data.value[i].isDate == true) {
                    data.value[i - 1].isBottom = true;
                }
                if (i == data.value.length - 1) {
                    data.value[i].isBottom = true;
                }
            }
        } else {
            messageBox.show({
                color: 'red',
                text: 'Notice Update Error!'
            });
        }
    }).catch(res => {
        console.log(res)
    }).finally(() => {
        loading.hide();
    })
})

</script>

<style lang="scss" scoped>
.noticeList-root {
    width: 100%;
    height: calc(100% - 10px);
    background-image: v-bind(backImage);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding-top: 10px;

    .noticeList-filter {
        backdrop-filter: blur(10px);
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
    }

    .noticeList-border {
        height: calc(100% - 20px);
        width: calc(100% - 20px);
        background: rgba(255, 255, 255, 0.3);
        margin-left: 10px;
        border-radius: 7px;
        overflow-y: auto;
        position: absolute;
    }

    .mySwitch {
        width: 100px;
        // height: 30px;
    }
}
</style>